---
title: <UpdateUsernameCard />
---

The `<UpdateUsernameCard />` component provides a simple, intuitive UI that enables users to update their account username within the authentication system. This component automatically integrates with the [`AuthUIProvider`](/components/auth-ui-provider) context, leveraging the username configuration set by your authentication framework.

## Usage

Include the `<UpdateUsernameCard />` in your custom settings or profile page:

```tsx
import { UpdateUsernameCard } from "@daveyplate/better-auth-ui"

export default function CustomSettings() {
    return (
        <div className="flex flex-col gap-6">
            <UpdateUsernameCard />
        </div>
    )
}
```

## Reference

These are the available props for `<UpdateUsernameCard />`:

<AutoTypeTable path="../src/components/settings/shared/settings-card.tsx" name="SettingsCardProps" />

## Styling

The styles can be customized precisely with Tailwind classes via the `classNames` prop:

```tsx
<UpdateUsernameCard
    classNames={{
        base: "border-blue-500",
        header: "bg-blue-50",
        title: "text-blue-500",
        description: "text-muted-foreground",
        content: "bg-blue-50",
        footer: "bg-blue-50",
        input: "bg-background border-blue-500 placeholder:text-muted",
    }}
/>
```